<template>
  <div>
     <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-position="top"
          
          class="form-page team-form-page"
           v-if="showParent && !id"
        >
        
          <el-form-item :label="$t('common.fields.parentDepartment.displayName')" prop="tagName">
            <biz-team-select
              :value="form.tagName"
              :type-service-provider="typeServiceProvider"
              collapse
              @input="update"
            />
          </el-form-item>
        
</el-form>
    <team-edit :type-service-provider="typeServiceProvider" :parent-dept="selectedDept" :init-data="inData" ref="team" page-type="dept" v-if="dept"></team-edit>
  </div>
</template>

<script>
/* api */
import { getEditDept } from '@src/api/TeamApi';

import TeamMixi from '@src/modules/teamV2/compoent/TeamMixin.js';
export default {
  name: 'team-edit-view',
  mixins: [TeamMixi],
  props: {
    id: {
      type: String
    },
    selectedDept: {
      type: Object
    },
    showParent: {
      type: Boolean
    },
    // 服务商 控制左边树 【0组织架构】 【1服务商】 【''全部】 默认和之前逻辑一样
    typeServiceProvider: {
      type: Number | String,
      default: ''
    },
  },
  data() {
     let validateTagName = (rule, value, callback) => {
      if (this.showParent && !this.id) {
        if(value && !value.length){
          callback(new Error(this.$t('common.fields.parentDepartment.placeholder')));
        }
        if(!value){
           callback(new Error(this.$t('common.fields.parentDepartment.placeholder')));
        }
      }
        callback();
      
    };
    return {
      inData: {
        tag: {}
      },
      dept:false,
      filedMap: [
        {
          displayName: this.$t('common.fields.parentDepartment.displayName'),
          fieldName: 'tagName',
          formType: 'text',
          placeHolder: this.$t('common.validate.maxLen', {limit: '20'}),
          isNull: 0,
          disabled: false
        }
      ],
      form: {
        tagName: []
      },
      rules: {
        tagName: [
          { required: true,  validator: validateTagName, trigger: ['input', 'change'] }
        ],
      }
    };
  },
  methods: {
    update(e) {
      this.form.tagName = e;
      this.$refs['form'].clearValidate()
    },
    packData(data) {
      let params = {};
      params.parent = data.tagName ? data.tagName[0] : {};
      return params;
    },
    validate() {
      if (this.showParent) {
        return this.$refs.form
          .validate()
          .then(valid => {
            if (!valid) return Promise.reject('validate fail.');

            const params = this.packData(this.form);
            return params;
          })
          .catch(err => {
            console.error(err);
          });
      }
      let params = {};
      params.parent = this.selectedDept;
      return Promise.resolve(params);
    },
    submit(){
      if(this.showParent && ! this.id){
       this.$refs.form.validate(valid => {
        if (valid) {
          this.onSubmit();
        }
      });
      }else{
        this.onSubmit();
      }
    },
    onSubmit() {
      let response = this.validate();
      let res = this.$refs.team.submit();
      response.then(rpon => {
        res.then(r => {
          if (r && rpon) {
            r.params = Object.assign(r.params, rpon);
            r && r.action === 'create'
              ? this.teamCreate(r, this.createCallBack)
              : this.teamUpdate(r, this.updateCallBack);
          }
        });
      });
    },
    updateCallBack(res) {
      this.$emit('deptSubmit', res);
    },
    createCallBack(res) {
      this.$emit('deptSubmit', res);
    },
    async getDetail(id) {
      let obj = {
         tagId: id ? id : this.id
      }
      const res = await getEditDept(obj);
     this.inData.tag = res.data;
     this.dept = true;
    }
  },
  watch:{
    'id':function(n){
       this.getDetail(n)
    }
  },
 async created() {
    if (this.id) {
     await this.getDetail();
    }else{
      this.dept = true
    }
  }
};
</script>
<style lang="scss">

.el-form.form-page.team-form-page.el-form--label-left{
  margin-bottom:-10px;
  max-width: 700px!important;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 24px 0!important;
}
.team-form-page .biz-team-select .biz-team-select-placeholder{
  line-height: 26px;
}

.team-form-page.form-page .form-builder .err-msg-wrap{
  min-height: 6px;
}
</style>